<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'Allowed IP Addresses' | translate"
  [loading]="isFormLoading()"
></ix-modal-header>
<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-list
        formArrayName="addresses"
        [formArray]="form.controls.addresses"
        [empty]="form.controls.addresses.controls.length === 0"
        [label]="'Allowed IP Addresses' | translate"
        [tooltip]="helpText.allowedIpAddresses.tooltip | translate"
        (add)="addAddress()"
      >
        @for (network of form.controls.addresses.controls; track network; let i = $index) {
          <ix-list-item
            [label]="'Allowed IP Addresses' | translate"
            (delete)="removeAddress(i)"
          >
            <ix-input
              [formControlName]="i"
              [label]="'IP Address/Subnet' | translate"
              [required]="true"
            ></ix-input>
          </ix-list-item>
        }
      </ix-list>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isFormLoading()"
        >
          {{ "Save" | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
